import './index.css'
import { themeColor } from '../../utils/contants';
const topTitleBar = (props) => {
    const {
        leftIcon,
        rightIcon,
        lable,
        separatorLine,
        searchBackground,
        isThemeColor,
        searchRightText,
        intermediateContentText,
        searchContentFun,
        rightIconStyle,
        rightIconFun,
        topTitleBarBackgroundColor  //背景色
    } = props
    return (
        <div className="topTitleBar" style={{backgroundColor: topTitleBarBackgroundColor || ''}}>
            {/* flex 布局，然后 是 top 定位！ */}
            <div className="topTitleBarMainContent">

                <div className="navIcon">
                    {leftIcon}
                    {/* left icon 并且有导航功能 */}
                    {/* 一个是 到分类，一个是返回 到上一个 */}

                    {/* <WapNav color='#1eafaf' /> */}
                </div>
                {/* searchBackground :  */}
                <div className='middleContents'>

                    <div className={["intermediateContent", searchBackground && "searchBackground"].join(' ')}>
                        {/* 这里只是写个内容 就行啦！ */}
                        {
                            // 比如 ‘账号管理’ 等 只有一句话之类的东西
                            // children 组件！
                            intermediateContentText && <div className="intermediateContentText">
                                {intermediateContentText}
                            </div>
                        }
                        {
                            lable && <div className={["searchLeftText", isThemeColor && "themeColor"].join(" ")}>
                                {lable}
                            </div>
                        }
                        {
                            separatorLine && <div className='separatorLine'>
                                {/* | */}
                            </div>
                        }
                        {
                            searchRightText && <div className='searchRightText' onClick={searchContentFun} >
                                {searchRightText}
                            </div>
                        }

                    </div>
                </div>

                {/* <div className="navIcon" > */}
                {/* right icon  可以有的功能： 
            1. personal 图标：导航到 个人中心页面
            2. 如果是未登录的话，就是 “登录”  home 页面，可以 不登录
            3. 点击搜索按钮 获取 输入的字段，发送ajax请求，实现 搜索功能，   */}
                {
                     <div className={["navIcon", isThemeColor && "themeColor", rightIconStyle && rightIconStyle].join(' ')} onClick={ rightIconFun } >
                        {
                         rightIcon && rightIcon
                        }
                        {/* 如果是未登录的话，就是 “登录” */}
                    </div>
                }
                {/* <ManagerO onClick={() => navigate('/personalCenter')} /> */}
                {/* 如果是未登录的话，就是 “登录” */}
                {/* </div> */}
            </div>

        </div>
    )
}

export default topTitleBar;